<template>
  <div class="plant-disease-detection">
    <el-container style="height: 100vh; display: flex; flex-direction: column">
      <!-- 顶部导航 -->
      <el-header class="header"> 🌿 拍照上传识别植物病害 </el-header>

      <!-- 主体内容 -->
      <el-main class="main">
        <el-card shadow="hover" class="upload-card">
          <h2 class="title">植物病害识别</h2>
          <p class="subtitle">上传一张植物照片，系统将帮您进行智能识别</p>

          <el-form :model="form" label-width="120px">
            <el-form-item label="植物照片">
              <el-upload
                class="upload-area"
                drag
                action="https://jsonplaceholder.typicode.com/posts/"
                :limit="1"
                :on-exceed="handleExceed"
                :on-success="handleSuccess"
              >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将图片拖到此处，或 <em>点击上传</em></div>
                <template #tip>
                  <div class="el-upload__tip">支持 JPG/PNG，最大 500KB</div>
                </template>
              </el-upload>
            </el-form-item>

            <el-form-item>
              <el-button type="success" class="detect-btn" @click="startDetection">
                开始识别
              </el-button>
            </el-form-item>
          </el-form>

          <!-- 图片预览 -->
          <div v-if="imageUrl" class="preview-image">
            <img :src="imageUrl" alt="预览图片" />
          </div>

          <!-- 检测结果 -->
          <transition name="fade">
            <div v-if="result" class="result-info">
              <el-alert :title="result" type="success" show-icon />
            </div>
          </transition>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const form = ref({})
const imageUrl = ref('')
const result = ref('')

const handleExceed = () => {
  ElMessage.warning('只能上传一张图片')
}

const handleSuccess = (response, file) => {
  imageUrl.value = URL.createObjectURL(file.raw)
  result.value = '' // 清空结果，等用户点击按钮
}

const startDetection = () => {
  if (!imageUrl.value) {
    ElMessage.error('请先上传植物照片')
    return
  }
  result.value = '✅ 模拟结果：未检测到病害，植物健康'
}
</script>

<style scoped>
.header {
  background: #a5d6a7;
  color: #2e7d32;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  line-height: 60px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.main {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 30px;
}
.upload-card {
  max-width: 600px;
  width: 100%;
  border-radius: 16px;
  background: linear-gradient(135deg, #e8f5e9, #ffffff);
  text-align: center;
  padding: 20px;
}
.title {
  color: #2e7d32;
  margin-bottom: 6px;
}
.subtitle {
  color: #388e3c;
  font-size: 14px;
  margin-bottom: 20px;
}
.upload-area {
  --el-upload-dragger-border-radius: 12px;
}
.detect-btn {
  background: linear-gradient(90deg, #66bb6a, #43a047);
  border: none;
  border-radius: 24px;
  padding: 12px 24px;
  font-size: 16px;
  color: white;
  cursor: pointer;
  transition: 0.3s;
}
.detect-btn:hover {
  opacity: 0.9;
}
.preview-image {
  margin-top: 20px;
}
.preview-image img {
  max-width: 280px;
  max-height: 280px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.result-info {
  margin-top: 20px;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
